<template>
  <div class="exam-list-container">
    <el-table 
      :data="examList" 
      v-loading="loading"
      element-loading-text="加载中..."
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="examName" label="考试名称" width="180" />
      <el-table-column prop="courseName" label="所属课程" width="120" />
      <el-table-column prop="totalScore" label="总分" width="80" />
      <el-table-column prop="startTime" label="开始时间" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.startTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.endTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="getStatusTagType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="examDuration" label="考试时长(分钟)" width="120">
        <template #default="scope">
          {{ scope.row.examDuration || '不限制' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="120">
        <template #default="scope">
          <el-button 
            size="small" 
            type="primary" 
            :disabled="scope.row.status !== 1"
            @click="enterExam(scope.row)"
          >
            进入考试
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getStudentExams, type ExamStudentVo } from '@/services/examService'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const examList = ref<ExamStudentVo[]>([])
const loading = ref(true)

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
}

// 获取状态文本
const getStatusText = (status: number) => {
  switch (status) {
    case 0: return '未开始'
    case 1: return '进行中'
    case 2: return '已结束'
    default: return '未知'
  }
}

// 获取状态标签类型
const getStatusTagType = (status: number) => {
  switch (status) {
    case 0: return 'info'  // 未开始
    case 1: return 'success'  // 进行中
    case 2: return 'danger'  // 已结束
    default: return 'info'
  }
}

// 设置表格行样式
const tableRowClassName = (row: { row: ExamStudentVo; rowIndex: number }) => {
  if (row.row.status === 0) {
    return 'not-start-row'
  } else if (row.row.status === 1) {
    return 'in-progress-row'
  } else if (row.row.status === 2) {
    return 'ended-row'
  }
  return ''
}

// 进入考试
const enterExam = (exam: ExamStudentVo) => {
  if (exam.status !== 1) {
    ElMessage.warning('考试不在进行中，无法进入')
    return
  }
  router.push(`/student/exam/take/${exam.examId}`)
}

// 获取学生考试列表
const fetchExams = async () => {
  try {
    loading.value = true
    const response = await getStudentExams()
    if (response.code === 200) {
      examList.value = response.data
    } else {
      ElMessage.error(response.msg || '获取考试列表失败')
    }
  } catch (error) {
    ElMessage.error('获取考试列表失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchExams()
})
</script>

<style scoped>
.exam-list-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

:deep(.not-start-row) {
  background-color: #f0f9eb;
}

:deep(.in-progress-row) {
  background-color: #ecf5ff;
}

:deep(.ended-row) {
  background-color: #fef0f0;
}
</style>